<template>
    <div>
        <span style="padding-left: 10px;font-size: 20px;"><van-icon name="arrow-left" @click="leftgo"/></span>
        <span style="padding-left: 110px;font-size: 20px;">找回密码</span>
        <div style="margin-top: 50px;">
        <van-cell-group inset>
                <van-field v-model="phone" type="text" placeholder="请输入您的手机号码" />
                <van-field v-model="val" type="text" placeholder="请输入手机验证码">
                    <template #button>
                        <van-button size="small" type="primary" @click="yzm" :disabled="numflag"
                            style="background:none;color:rgb(76, 138, 251);border: none;">
                            {{ numflag ? countdown : '获取验证码' }}
                        </van-button>
                    </template>
                </van-field>
                <van-button type="primary" block @click="login"
                    style="margin-top: 40px;border-radius: 30px;width:92%;margin-left:10px;">下一步</van-button>
            </van-cell-group>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,watchEffect,onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter();
import { Toast } from 'antd-mobile'
const leftgo = () => {
    router.go(-1);
}
// 手机号登录
const val = ref('');
const phone = ref('');
const code = ref('');
// 点击获取验证码倒计时
const numflag = ref(false); // 倒计时flag
const countdown = ref(60); // 倒计时渲染
const startCountdown = () => {
    numflag.value = true;
    const intervalId = setInterval(() => {
        countdown.value -= 1;
        localStorage.setItem('countdown',countdown.value)
        if (countdown.value === 0) {
            clearInterval(intervalId);
            countdown.value = 60;
            numflag.value = false;
            localStorage.removeItem('numflag')
            localStorage.removeItem('countdown')
        }
    }, 1000);
};
watchEffect(() => {
    if (countdown.value === 60) {
        numflag.value = false;
    }
});
const initCountdown = () => {
    const savedCountdown = localStorage.getItem('countdown');
    const savedNumFlag = localStorage.getItem('numflag') === 'true';
    if (savedCountdown && savedNumFlag) {
        countdown.value = parseInt(savedCountdown, 10);
        numflag.value = true;
        // 判断倒计时是否结束，未结束则提示用户等待
        if (countdown.value !== 60) {
            startCountdown();
            Toast.show({
                content: '请等待倒计时结束'
            });
        }
    }
};
onMounted(initCountdown)
const yzm = async () => {
    let reg = /^1[3456789]\d{9}$/;
    if (phone.value === "") {
        Toast.show({
            content: "请输入手机号"
        });
        return;
    }
    if (!reg.test(phone.value)) {
        Toast.show({
            content: '手机号格式不正确'
        });
        return;
    }
    if (numflag.value) {
        Toast.show({
            content: '请等待倒计时结束'
        });
        return;
    }
    let { data: { data } } = await axios.post('http://127.0.0.1:3000/SMS',
        { phone: phone.value });
    console.log(data);
    startCountdown();
    code.value = data;
    localStorage.setItem('numflag', 'true');
};
const login = async () => {
    if (val.value === "") {
        Toast.show({
            content: "请输入验证码"
        });
        return;
    }
    if (val.value !== code.value) {
        Toast.show({
            content: "验证码不正确"
        });
        return;
    }
    let { data } = await axios.post("http://127.0.0.1:3000/code_login",
        {
            phone: phone.value,
            code: code.value,
        });
    if (data.code === 200) {
        sessionStorage.setItem('token', data.token);
        console.log('密码重置为:123456')
        router.push('/phone')
    } else {
        Toast.show({
            content: '登录失败'
        });
    }
};
</script>

<style scoped>

</style>